<!-- 从业者端-在线学习-题库列表-->
<template>
  <view class="container">
    <!-- 模拟考试卡片 -->
    <view class="exam-card" @click="simulationIndex">
      <view class="exam-header">
        <text class="exam-title">模拟考试</text>
        <view class="question-count">
          <!-- <text>34</text> -->
          <u-icon name="arrow-right" size="32" color="#666"></u-icon>
        </view>
      </view>
      <text class="exam-desc">随机抽100题 | 90分钟</text>
    </view>

    <!-- 题库列表 -->
    <view class="question-bank-list">
      <view 
        class="bank-item" 
        v-for="(bank, index) in questionBanks" 
        :key="bank.btk_code"
        @click="goToBank(bank)"
      >
        <view class="bank-info">
          <text class="bank-name">{{ bank.btk_name }}</text>
          <text class="bank-meta">{{ bank.btk_zy }} | {{ bank.btk_zylevel }}</text>
        </view>
        <!-- 锁定图标 -->
       <u-icon 
          v-if="!bank.isOpen" 
          name="lock" 
          size="32" 
          color="#999"
          @click.stop="showUnlockDialog(bank)"
        ></u-icon>
				<u-icon v-else name="arrow-right" size="32" color="#666"></u-icon>
				<!-- <u-icon  name="arrow-right" size="32" color="#666"></u-icon> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      questionBanks: [
        {
          id: 1,
          name: '题库名称1',
          major: '所属专业1',
          level: '专业等级1',
          locked: false
        },
        {
          id: 2,
          name: '题库名称2',
          major: '所属专业2',
          level: '专业等级2',
          locked: true
        },
        {
          id: 3,
          name: '题库名称3',
          major: '所属专业3',
          level: '专业等级3',
          locked: true
        }
      ],
			kzquestionBanks:[],
			jscode: '',
			jsItemList: []
    }
  },
	// 获取入口 ，判断是否从竞赛过来的
	onLoad(options) {
		this.jscode = options.jscode
	},
	onShow() {
		if(this.jscode) {
			// 获取在线题库列表
			this.getQuerylist()
			// 竞赛题库列表
			this.jsTiKu()
		} else {
			// 获取在线题库列表
			this.getQuerylist()
			this.selectCyKzbm()
		}

	},
  methods: {
		// 查询竞赛题库
		jsTiKu() {
			this.$u.api.querybjs({
				"bjscode": this.jscode
			}).then(res => {
				this.kzquestionBanks = res.data.base_info.tklist
				console.log('js-yefe',res, this.kzquestionBanks)
				this.updateTkIsclock()
			})
		},
		// 查询所有题库列表
		getQuerylist() {
			this.$u.api.querybtklist().then(res => {
				this.questionBanks = []
				this.questionBanks = res.data.base_info
				// 增加是否开放字段，0未开放，1开放
				this.questionBanks = this.questionBanks.map(item => ({
					...item,
					isOpen: 0
				}))
				console.log('querylist:', this.questionBanks)
			})
		},
		// 取回已经报名支付的考证，获取考证内的福利题库，跟题库列表对比，确认哪些题库可以开放
		selectCyKzbm() {
			this.$u.api.querykzbm({
				"usercode": uni.getStorageSync('usercode')
			}).then(res => {
				console.log('取回已经报名支付的考证：',res)
				let baseinfo = res.data.base_info				
				this.chanageCykzTk(baseinfo)
			})
		},
		// 根据从业者取回来的考证信息，获取转化的题库
		chanageCykzTk(baseinfo) {
			this.kzquestionBanks = []
			for(let i=0; i<baseinfo.length; i++ ) {
				for(let j=0; j<baseinfo[i].levelinfo.length; j++) {
					for(let k=0; k<baseinfo[i].levelinfo[j].tkfl.length; k++){
						this.kzquestionBanks.push(baseinfo[i].levelinfo[j].tkfl[k].kzl_fltk)
					}
				}
			}
			// 判断哪些是考试的题库
			console.log('tkfl-1:',this.kzquestionBanks)
			this.updateTkIsclock()
		},
		
		// 将考证福利题库与所有题库列表进行整合，当考证报名后，相对应的考证福利题库就开放，其它题库仍加锁
		updateTkIsclock() {
			// 若福利题库存在，就进入，否则就不进行整合
			if(this.kzquestionBanks) {
				const kzIds = this.kzquestionBanks.map(item => item.btk_code);				
				this.questionBanks.forEach(qbItem => {
						if (kzIds.includes(qbItem.btk_code)) {
								this.$set(qbItem, 'isOpen', 1);
						}
				});
			
			}
				console.log('tkfl-2:',this.questionBanks)
		},
		// 模拟考试
		simulationIndex() {
			uni.navigateTo({
			  url: `/pages/Practitioner/question/simulationIndex`
			})
		},
    // 进入题库
    goToBank(bank) {			
      if (!bank.isOpen) {
        this.showUnlockDialog(bank)
        return
      }
			console.log('进入题库：', bank)
      uni.navigateTo({
        url: `/pages/Practitioner/question/questionIndex?bank=${bank.btk_code}`
      })
    },
    
    // 显示解锁对话框
    showUnlockDialog(bank) {
			uni.showModal({
				title: '提示',
				content: `需要解锁"${bank.btk_name}"题库`,
				confirmText: '去解锁',
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
						  url: '/pages/Practitioner/examTrain/examTrain'
						})
					}
				}
			})
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
}

.exam-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  
  .exam-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15rpx;
    
    .exam-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .question-count {
      display: flex;
      align-items: center;
      
      text {
        font-size: 26rpx;
        color: #666;
        margin-right: 5rpx;
      }
    }
  }
  
  .exam-desc {
    font-size: 26rpx;
    color: #666;
  }
}

.question-bank-list {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.bank-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  .bank-info {
    flex: 1;
    
    .bank-name {
      font-size: 28rpx;
      color: #333;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .bank-meta {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .u-icon {
    margin-left: 20rpx;
  }
}
</style>